<template>
  <div class="activatecontent">
    <div class="activetop">
      <div class="bgimg"><img src="../../assets/img/ComreadActivate/invalid-name@3x.png" alt=""></div>
      <div class="activetoptitle">加入「十分读书」</div>
    </div>
    <div class="futitle">精选上百本好书，10分钟畅读精华拆解</div>
    <div class="touxiangimg"><img :src="tximg" alt=""></div>
    <p class="activeshowtext">
      你的好友{{nickname}}<br>
      赠送你一个会员邀请码
    </p>
    <!--<div class="invatecode">QC294358</div>-->
    <div class="invatecode">{{activecode}}</div>
    <div class="useing" v-if="is_used===1">当前邀请码已使用，请选择其他邀请码</div>
    <div class="codeexplain">
      <p v-html="illshtml">
      </p>
    </div>
    <div class="btns">
      <btn :obj='btnstyle' :text="textbtn" v-on:statr="pulldown" v-if="is_used===0"></btn>
      <btn :obj='btnstyle_al' :text="textbtn1" v-else></btn>
    </div>
    <toast v-if="isative" :qr_code="qr_code" :user_avatar="user_avatar" :user_name="user_name" @hide="hidetoast"></toast>
    <transition
      name="fademode">
      <TextPopup :options="PopupConfig" v-if="Popup" @hide="hidepopup" @ok="ok()" @call="call()"
                 @fall="fall()">
      </TextPopup>
    </transition>
  </div>
</template>

<script>

  export default {
    name: 'index',
    data: function () {
      return {
        textbtn: '立即激活',
        textbtn1: '已使用',
        isative: false,
        user_avatar:'',
        user_name:'',
        qr_code: '',
        btnstyle: {
          opacity: 1,
          width: '70%',
          boxShadow: '0 10px 24px 0 rgba(255, 90, 95, 0.4)',
          height: '4.5rem',
          background: '#ff5a5f'
        },
        btnstyle_al: {
          opacity: 1,
          width: '70%',
          height: '4.5rem',
          background: '#f0f0f2',
          color: '#909099'
        },
        Popup: false,
        codeisuse: false,
        activecode: '',
        inviteCodeId: '',
        PopupConfig: {
          btnStyle: {
            width: '70%',
            height: '4rem',
            background: '#ffd000',
            borderRadius: '4rem',
            color: '#66440a',
            fontSize: '1.8rem',
            // boxShadow: '0 10px 24px 0 rgba(255, 208, 0, 0.4)'
          },
          btnText: '确定',
          btnClick: 'fall',
          title: '温馨提示',
          content: '',
          textStyle: {
            lineHeight: '2rem',
            fontSize: '1.5rem',
            color: '#999'
          },
          Dis: false,
          icon: true,
          btnnum: 1,

        },
        tximg: '',
        nickname: '',
        is_used: 0,
        illshtml: '',
        isstock: true
      }
    },
    mounted: function () {
      // 获取用户信息
      this.$axios.get_user(this.$Login.Vip_token).then(res => {
        this.user_name = res.data.qing_data.user_info.nickname
        this.user_avatar = res.data.qing_data.user_info.avatar
      })
      this.update()
    },
    methods: {
      update: function () {
        var shareparms = {}
        shareparms.share_id = this.$route.query.share_id
        shareparms.share_token = this.$route.query.share_token
        this.$axios.invite_code(shareparms).then(res => {
          this.nickname = res.data.qing_data.nickname
          this.tximg = res.data.qing_data.headimgurl
          this.activecode = res.data.qing_data.code
          this.inviteCodeId = res.data.qing_data.post_id
          this.is_used = res.data.qing_data.is_used
          res.data.qing_data.faq.split('|').map((item, index) => {
            this.illshtml += '• ' + item + '<br>'
          })
        })
      },
      pulldown() {
        var _this = this
        var invateparms = {
          code: this.activecode,
          invite_code_id: this.inviteCodeId,
          share_id: this.$route.query.share_id,
          share_token: this.$route.query.share_token,
        }
        if (this.isstock) {
          this.isstock = false
          setTimeout(() => {
            _this.isstock = true
          }, 2000)
          this.$axios.activation(invateparms).then(res => {
            this.isstock = true
            if (res.data.qing_data.is_activation) {
              if (res.data.qing_data.qr_code !== '-1') {
                this.isative = true
                this.qr_code = res.data.qing_data.qr_code
              }
              // else {
              //   Toast({
              //     message: '激活成功',
              //     iconClass: 'iconfont icon-tianjiachenggong',
              //     duration: 3000
              //   })
              //   this.go('Collection')
              // }
            } else {
              this.PopupConfig.content = '共读活动未开始，开始时间为' + res.data.qing_data.activation_date + '，请在开始前一天进行激活～'
              this.Popup = true
            }
          })
        }
      },
      hidepopup() {
        this.Popup = false
      },
      fall() {
        this.hidepopup()
      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj || {}
        })
      },
      hidetoast: function () {
        this.isative = false
      }
    },
    components: {
      btn: () => import('../../components/btn/index'),
      TextPopup: () => import('../../components/TextPopup/index'),
      toast: () => import('./components/toes/index')
    }
  }
</script>

<style scoped>
  @import "../../assets/css/views/ComreadActivate/index.css";

</style>
